<template>
  <div id="home">
    <home-swiper></home-swiper>
    <Introduce>
      <div slot="left" class="inc l">
        <div class="inner">
          <my-circle text1="响应当道" text2="统一形象"></my-circle>
          <my-circle text1="超速加载" text2="拒绝等待" size="232" left="280" top="90"></my-circle>
          <my-circle text1="流畅的" text2="交互效果" size="145" left="440" top="13"></my-circle>
          <my-circle text1="酷炫H5" text2="无需插件" size="212" left="60" top="330"></my-circle>
          <my-circle text1="同步数据" text2="一键搞定" size="164" left="351" top="413"></my-circle>
          <my-circle text1="" text2="" size="88" left="564" top="303"></my-circle>
          <my-circle text1="" text2="" size="127" left="-35" top="320"></my-circle>
        </div>
      </div>
      <div slot="right" class="inc r">
        <div class="inner">
          <div class="cans-list">
            <div class="cans-list-item" v-for="item in cansList" :key="item.url">
              <div class="img">
                <img :src=item.cansImgUrl alt="">
              </div>
              <div class="info">
                <h2 class="info-title">{{item.canTitle}}</h2>
                <div class="info-content">{{item.canInfo}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Introduce>
    <Cooperation></Cooperation>
    <div class="xuanba">
      <h1>人员选拔</h1>
      <div class="text">IT外包技术人员专业筛选，流程规范，技术大牛为您保驾护航</div>
      <div class="pic">
        <img src="http://localhost:3000/upload/xuanba.jpg" alt="">
      </div>
    </div>
    <Bg imgUrl="http://localhost:3000/upload/fwliucheng-bg.jpg" title="" height="700px"></Bg>
  </div>
</template>

<script>
import HomeSwiper from '@/views/homeViews/home/components/HomeSwiper.vue';
import Introduce from '@/components/content/introduce/Index';
import MyCircle from './components/Circle';
import Cooperation from '@/components/content/cooperation/Index';
import Bg from '@/components/content/bgContainer/Index';

export default {
  name: 'Index',
  data() {
    return {
      cansList: [
        {
          cansImgUrl: require('../../../assets/img/icon2_0.png'),
          canTitle: '高端定制网站建设',
          canInfo: '品牌官网·集团网站·营销型网站·响应式网站建设·电子商务平台·业务系统定制'
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_1.png'),
          canTitle: '移动互联网解决方案',
          canInfo: '手机网站建设·APP开发·H5页面设计开发'
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '微信开发运营',
          canInfo: '微官网建设·PC网站和微信平台整合方案·微信公众号运营·H5社交游戏开发'
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_3.png'),
          canTitle: '运维服务',
          canInfo: '云服务·网站运维·服务器运维'
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_4.png'),
          canTitle: '网站代运营',
          canInfo: '我们将对客户的数字资产进行高效准确配置，让网站主动与品牌建立长期关系'
        }
      ]
    };
  },
  components: {
    HomeSwiper,
    Introduce,
    MyCircle,
    Cooperation,
    Bg
  }
};
</script>

<style scoped lang="less">
#home {
  .inc {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
    .inner {
      width: 593px;
      height: 593px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -296px 0 0 -296px;
    }
  }
  .l {
    background: url('../../../assets/img/bg2a.jpg') no-repeat center;
  }
  .r {
    background: url('../../../assets/img/bg2b.jpg') no-repeat center;
  }
  .cans-list{
    .cans-list-item{
      display: flex;
      color: #ffffff;
      align-items: center;
      margin: 50px 0;
      .img{
        width: 55px;
        height: 50px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        margin-left: 30px;
        .info-title{
          font-family: 'Heiti SC', Arial;
          color: #ffffff;
        }
        .info-content{
          margin-top: 15px;
          font-size: 14px;
        }
      }
    }
  }
  .xuanba{
    width: 1200px;
    margin: 30px auto;
    h1{
      text-align: center;
    }
    .text{
      text-align: center;
      font-size: 20px;
    }
    .pic{
      width: 100%;
      margin-top: 30px;
      img{
        width: 100%;
      }
    }
  }
}
</style>
